/* eslint-disable prefer-const */
/* eslint-disable no-mixed-operators */
/* eslint-disable semi */
/* eslint-disable comma-dangle */
/* eslint-disable no-unused-vars */
import React, { useState } from "react";
// ** Reactstrap Imports
import { Card, CardBody, Label } from "reactstrap";
// ** Third Party Imports
import { useDropzone } from "react-dropzone";
import { FileText, Edit3, UploadCloud, X } from "react-feather";
import classNames from "classnames";

function FileUploaderSingle({
  file,
  onChange,
  touch,
  error,
  disabled,
  frontCard,
  lowerBtn,
  onlyImage,
  backCard,
  Signature,
  documentFiles,
}) {
  // Using Dropdown Images
  const { getRootProps, getInputProps } = useDropzone({
    multiple: false,
    onDrop: (acceptedFile) => onChange(acceptedFile[0]),
  });
  // calculate the file Size
  const renderFileSize = (size) => {
    if (Math.round(size / 100) / 10 > 1000) {
      return `${(Math.round(size / 100) / 10000).toFixed(1)} mb`;
    } else {
      return `${(Math.round(size / 100) / 10).toFixed(1)} kb`;
    }
  };

  // Display the file Preview
  const renderFilePreview = (file) => {
    if (file && ["image/jpeg", "image/jpg", "image/png"].includes(file?.type)) {
      return (
        <Label {...getRootProps()} style={{ cursor: "pointer" }}>
          {/* <a target="_blank" href={URL.createObjectURL(file)}> */}
          <img
            className="contained uploader-image"
            alt={file.name}
            src={URL.createObjectURL(file)}
            height={frontCard || backCard ? "210" : "210"}
            width={frontCard || backCard ? "274" : "274"}
          />
          {/* </a> */}
        </Label>
      );
    } else {
      return (
        <>
          <div className="file-preview--other">
            <FileText size="28" />
            <p className="mb-0 pl-1">{file.name}</p>
          </div>
        </>
      );
    }
  };

  // Uploader CardBody
  const uploadFileRenderer = () => {
    return (
      <>
        <CardBody
          className={lowerBtn ? " imageUploader-lowerBtn " : "imageUploader "}
        >
          <div {...getRootProps({ className: "dropzone" })}>
            <input {...getInputProps()} disabled accept="image/*" />

            <div className="d-flex align-items-center justify-content-center flex-column sm-text-center">
              {frontCard === true || backCard === true || onlyImage === true ? (
                <strong className="fs-11 black">
                  {frontCard && "Front side"}
                  {backCard && "Back side"}
                  {onlyImage && "Front"}
                  &nbsp;of Insurance Card
                </strong>
              ) : null}
              {Signature && <Edit3 size={64} strokeWidth={1} />}
              {frontCard === true ||
              backCard === true ||
              onlyImage === true ||
              documentFiles === true ? (
                <UploadCloud size={64} />
              ) : null}
              {Signature && <span className="success-Color">SIGN HERE</span>}
              {Signature && (
                <span>
                  By adding your signature, you are eSigning this form.
                </span>
              )}
              {frontCard === true ||
              backCard === true ||
              documentFiles === true ? (
                <h5 className=" fs-11">
                  <span className="success-Color fw-bold">Choose file</span> or
                  drag and drop file
                </h5>
              ) : null}
              {onlyImage && (
                <span className="success-Color fw-800">
                  Drag a photo of your insurance card here
                </span>
              )}

              <p className="text-secondary fs-12 mb-0">
                {lowerBtn && " only JPG, PNG, PDf and Doc files"}
                {onlyImage && "or browse for a file to upload "}
                {documentFiles &&
                  "only PDF, JPG, PNG, Mp3, M4A, DOC & CSV files | Max file size of 10 MB "}
              </p>
              <p className="text-secondary fs-12 mb-0">
                {(lowerBtn || onlyImage) && "Max file size of 3 MB"}
              </p>
              {error && <Label className="mt-0 text-danger ">{error}</Label>}
            </div>
          </div>
        </CardBody>
        {lowerBtn && (
          <div className="uploader-lower-box fs-12 fw-bold black">
            {frontCard ? "Front Side" : "Back Side"}
          </div>
        )}
      </>
    );
  };

  return (
    <Card className="bg-transparent card-body-bg-white">
      {onlyImage && <Label className="mt-1 pl-1">Insurance Card on File</Label>}
      {!file && uploadFileRenderer()}
      {file &&
        (error ||
          !["image/jpeg", "image/png", "image/jpg"].includes(file?.type)) &&
        uploadFileRenderer()}

      {file && !error && (
        <div className="file-details  text-center align-items-center">
          <div className="file-preview me-1 mt-1">
            {renderFilePreview(file)}

            <div
              className={classNames({
                "uploader-image-detail": true,
                "d-none": !["image/jpeg", "image/png", "image/jpg"].includes(
                  file?.type
                ),
              })}
            >
              <div
                className="cancel-uploader-image"
                onClick={() => onChange(null)}
              >
                <X size={25} color="#000" />
              </div>
              <div className="uploader-detail-box">
                <p className="text">{file.name}</p>
              </div>
            </div>
          </div>
        </div>
      )}
    </Card>
  );
}

export default FileUploaderSingle;
